<template>
	<div class="home">
		<h1>shallow 浅层</h1>
		<p>几个要是一起变就会全部都改变，有屁用？</p>
		<div>
			<h5>ref: </h5>
			<p>{{ aaa }}</p>
		</div>
		<hr>
		
		<div>
			<h5>shallowRef</h5>
			<p>{{ bbb }}</p>
		</div>
		<hr>
		
		<div>
			<h5>reactive</h5>
			<p>{{ ccc }}</p>
		</div>
		<hr>
		
		<div>
			<h5>shallowReactive</h5>
			<p>{{ ddd }}</p>
		</div>
		<hr>
		
		<div>
			<h5>readonly</h5>
			<p>{{ eee }}</p>
		</div>
		<hr>
		
		<div>
			<h5>shallowReadonly</h5>
			<p>{{ fff }}</p>
		</div>
		<hr>
		
		<button @click="funChange('aaa')">修改aaa</button>
		<button @click="funChange('bbb')">修改bbb</button>
		<button @click="funChange('ccc')">修改ccc</button>
		<button @click="funChange('ddd')">修改ddd</button>
		<button @click="funChange('eee')">修改eee</button>
		<button @click="funChange('fff')">修改fff</button>
	</div>
</template>

<script >
// defineComponent 函数，目的是定义一个组件，内部可传入一个配置对象
import { defineComponent, reactive, shallowReactive, ref, shallowRef, readonly, shallowReadonly } from 'vue';
export default defineComponent({
	setup(){
		const aaa = ref({
			name: '你一大爷',
			job: {
				name: '前端'
			}
		})
		const bbb = shallowRef({
			name: '你二大爷',
			job: {
				name: '前端'
			}
		})
		const ccc = reactive({
			name: '你三大爷',
			job: {
				name: '前端'
			}
		})
		const ddd = shallowReactive({
			name: '你四大爷',
			job: {
				name: '前端'
			}
		})
		const eee = readonly({
			name: '你四大爷',
			job: {
				name: '前端'
			}
		})
		const fff = shallowReadonly({
			name: '你四大爷',
			job: {
				name: '前端'
			}
		})
		
		function funChange(e){
			switch (e){
				case 'aaa':
					aaa.value.name = aaa.value.name + '牛逼'
					aaa.value.job.name = aaa.value.job.name + '牛逼'
					break;
				case 'bbb':
					bbb.value.name = bbb.value.name + '牛逼'
					bbb.value.job.name = bbb.value.job.name + '牛逼'
					break;
				case 'ccc':
					ccc.name = ccc.name + '牛逼'
					ccc.job.name = ccc.job.name + '牛逼'
					break;
				case 'ddd':
					ddd.name = ddd.name + '牛逼'
					ddd.job.name = ddd.job.name + '牛逼'
					break;
				case 'eee':
					eee.name = ddd.eee + '牛逼'
					eee.job.name = eee.job.name + '牛逼'
					break;
				case 'fff':
					fff.name = fff.name + '牛逼'
					fff.job.name = fff.job.name + '牛逼'
					break;
				default:
					break;
			}
		}
		
		return {
			aaa,
			bbb,
			ccc,
			ddd,
			eee,
			fff,
			funChange
		}
	}
});
</script>
